<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0 ;padding:0}
    .comments{width:100%}
    .news{width: 100%;height:200px;border: 1px solid #74c2f0}
    .news h2{text-align: center;}
    .news div{padding-left:30px;text-align: left;text-indent: 20px; }
    .text-comment{width:100%;height:200px; ;border-top: none;position: relative;}
    
    .text-comment textarea{width:100%;height:182px;font-weight: bold; color: #0E2D5F;}
    button{position: absolute;bottom: 25px;right:15px;}
    table a:hover{color:blue;font-weight: bolder}
    </style>

    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/demo.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/xheditor-1.2.2.min.js"></script>
    <script type="text/javascript" src="../js/xheditor_lang/zh-cn.js"></script>
    <script type="text/javascript" src="../js/jquery.cookie.js"></script>
</head>
<body>
	<h1>NEWS details</h1>
    <div class="news">
        
        <h2 class="title">title...</h2>
        <div class="content">content...</div>
    </div>
    <div class="comments">
            <div class='text-comment'>
                    <!-- <p>Comments:</p> -->
                <textarea class=" xheditor">
                       
                        
                </textarea>
                <button class="button">Publish</button>
            </div>  


            <table id="dg" title="Comments-options" class="easyui-datagrid" 
                url="http://10.31.160.59:3000/comment/list"
                toolbar="#toolbar" pagination="true"
                rownumbers="true" fitColumns="true"  style="width:100%;height:314px">
                <thead>
                </thead>
            </table>
        <div id="toolbar">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()"> Edit comment</a>
            <a href="javascript:void(0)" class="easyui-linkbutton delete-ck" iconCls="icon-remove" plain="true">Remove comment</a>
        </div>
        
        <div id="dlg" class="easyui-dialog" style="width:400px" closed="true" buttons="#dlg-buttons">
            <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
                <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">User Information</div>
                <div style="margin-bottom:10px">
                    <input name="username" class="easyui-textbox" required="true" label="First Name:"style="width:100%">
                </div>
                <div style="margin-bottom:10px">
                    <input name="content" class="easyui-textbox" required="true" label="Last Name:" style="width:100%">
                </div>
                <div style="margin-bottom:10px">
                        <input name="opration" class="easyui-textbox" required="true" label="First Name:" style="width:100%">
                </div>
            </form>
        </div>
        
        </div>
    </div>
    <div id="editor-dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
         <form id="ff" method="post">

              
           <input class="three" style="visibility:hidden;float:left;height:0;width:0;margin:0;padding:0">
            
            <div style="margin-bottom:20px">
                <input class="easyui-textbox first" name="username" style="width:100%" data-options="label:'Username:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox second" name="content" style="width:100%" data-options="label:'Content:',required:true,validType:'email'">
            </div>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
        </form>
    
    </div>
<script>
var sid = getCookie('id');

$.ajax({
	type:"get",
	url:"http://10.31.160.59:3000/news/data/" + sid,
	async:true
}).done(function(data){
	$('.title').html(data.title);
	$('.content').html(data.desc);
})


	
$('#editor-dlg').dialog({
	title: 'editor Comments',
	width: 400,
	height: 200,
	closed: true,
	cache: false,
	modal: true
});
var str='http://10.31.160.59:3000/comment/list/' + sid;
$('#dg').datagrid({
	pagination: true,
	pageumber:100,
	pageSize: 10,
	pageList: [10, 20, 30, 40],
	method: 'get',
	url:str,
	columns: [
		[{
				field: 'username',
				title: 'username'
			},
			{
				field: 'text',
				title: 'content'
			},
			{
				field: 'newsId',
				title: 'opration',
				formatter: function(value, row, index) {
					return "<a onclick=deleteDate('" + row._id + "')>delete</a>   <a onclick=editorDate('" + row._id + "')>editor</a>"
				}
			},
			{
				field: 'ck',
				title: 'checkbox',
				checkbox: true,
				align: 'center',
			}
		]
	]
});
//delete
function deleteDate(id) {

	$.ajax({
		type: 'delete',
		url: 'http://10.31.160.59:3000/comment/data/' + id,
		async: true,
	}).done(function(res) {
		$('#dg').datagrid('reload')
	})
}

function submitForm() {
	$('#ff').form('submit');
	var id = $(".three").text();
	$.ajax({
		type: 'put',
		url: 'http://10.31.160.59:3000/comment/data/' + id,
		async: true,
		data: {
			username: $('.first').val(),
			text: $('.second').val(),
			newsId: sid
		},
	}).done(function(res) {
		$('#dg').datagrid('reload')
		$('#editor-dlg').dialog('close');
	})

}

function editorDate(id) {
	$('#editor-dlg').dialog('open');
	$(".three").text(id);
}

//add
$('.button').on('click', function() {
	var text = $('.xheditor').val();

	if(text.length === 0) {
		$.messager.show({
			title: 'Warnning',
			msg: 'Please write comments',
			timeout: 1000,
			showType: 'show',
			style: 'position:absolut;bottom:130px;left:30px'
		})
	} else {
		$.ajax({
			url: "http://10.31.160.59:3000/comment/data",
			method: 'post',
			data: {
				username: 'ADC',
				text: text,
				newsId:sid
			},
			async: true,
		}).done(function(res) {
			$('#dg').datagrid('reload'),
				$('.xheditor').val('');
			$.messager.show({
				title: 'Success',
				msg: 'Comments have been submitted',
				timeout: 1000,
				showType: 'show',
				style: 'position:absolut;bottom:130px;left:30px'
			})
		})

	}
})

$('.delete-ck').on('click', function() {
	var rows = $("#dg").datagrid('getSelections');
	$.messager.confirm('My Title', 'Are you confirm this?', function() {
		if(rows.length > 0) {
			var ids = [];
			rows.forEach(function(item, idx) {
				ids.push(item._id)
			})
			$.ajax({
				type: 'post',
				url: 'http://10.31.160.59:3000/comment/data/removes',
				async: true,
				data: {
					ids: ids.toString()
				},
			}).done(function(res) {
				$('#dg').datagrid('reload')
			})
		}
	});

})

</script>
</body>
</html>